<template>
  <div class="cone">
      <div class="device-radio-body">
        <el-radio-group v-model="activeName" size="small" @change="selectStyle">
          <el-radio-button label="first" >人员设备</el-radio-button>
          <el-radio-button label="second" disabled>资产设备</el-radio-button>
          <el-radio-button label="third" >锥桶信息</el-radio-button>
        </el-radio-group>
      </div>
      <div class="device-add-button">
        <div style="width: 100px">
          <el-button size="mini" style="color:#1c7cd5;width: 100px;height: 24px;padding: 4px 3px" icon="el-icon-plus" @click="deviceadd">新增锥桶</el-button>
        </div>
      </div>
      <div :class="coneStyle">
        <div style="padding-left: 0px;padding-top: 1px; padding-right: 0px;">
          <el-table
            :data="deviceUser"
            style="width: 100%;background-color: rgba(1,1,1,0)"
            height="270px"
            stripe
            :header-cell-style="{background:'#1C7CD5',color:'#fff'}">
            <el-table-column
              prop="termID"
              label="设备号"
              width="120" height="20">
            </el-table-column>
            <el-table-column
              label="终端类型"
              width="70">
                锥桶
            </el-table-column>
            <el-table-column
              prop="type"
              width="120"
              label="围栏生成方式">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">按组生成</span>
                <span v-if="scope.row.type==0">单独生成</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="group"
              label="编组"
              width="70">
            </el-table-column>
            <el-table-column
              prop="no"
              label="序号"
              width="70">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-row>
                  <el-button type="success" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#1c7cd5;width: 36px;height:20px;font-size: 12px;padding: 0" @click="editDevice(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="info" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#F33718;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px"  @click="deleteDevice(scope.$index, scope.row)">删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="device-info-form" :style="deviceInfoFormStyle">
        <el-form class="apply-form first-form" :model="coneInfo" :rules="rules"  ref="coneSaveForm">
          <input type="hidden" v-model="coneInfo.id">
          <el-form-item label="锥桶编号:" prop="termID">
            <el-input v-model="coneInfo.termID" size="mini" placeholder="请填写锥桶编号" ></el-input>
          </el-form-item>

          <el-form-item label="锥桶分组:" prop="group">
            <el-select v-model="coneInfo.group" size="mini" style="width: 180px;" placeholder="请选择分组">
              <el-option v-for="(item,index) in coneInfoGroup" :key="index" :label="item.label+'('+item.all+')'" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="锥桶类型:" prop="type">
            <el-select v-model="coneInfo.type" size="mini" style="width: 180px;" placeholder="请选择锥桶类型">
              <el-option :value="1" label="按组生成"></el-option>
              <el-option :value="0" label="单独生成"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="锥桶序号:" prop="no">
            <el-input v-model="coneInfo.no" size="mini" placeholder="请填写锥桶序号"></el-input>
          </el-form-item>

          <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background:rgba(244,244,244,1);border:1px solid rgba(187,187,187,1);" @click="coneFormCancle">取消</el-button>
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="insertConeInfoFormPost('coneSaveForm')">新增</el-button>
          </el-row>
        </el-form>
      </div>
      <div class="device-info-form-edit" :style="deviceInfoFormEditStyle">
        <el-form class="apply-form first-form" :model="coneInfo1" :rules="rules" ref="coneEditForm">
          <input type="hidden" v-model="coneInfo1.id">
          <el-form-item label="锥桶编号:" prop="termID">
            <el-input v-model="coneInfo1.termID" size="mini" placeholder="请填写锥桶编号"></el-input>
          </el-form-item>

          <el-form-item label="锥桶分组:" prop="group">
            <el-select v-model="coneInfo1.group" size="mini" style="width: 180px;" placeholder="请选择分组">
              <el-option v-for="(item,index) in coneInfoGroup" :key="index" :label="item.label+'('+item.all+')'" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="锥桶类型:" prop="type">
            <el-select v-model="coneInfo1.type" size="mini" style="width: 180px;" placeholder="请选择锥桶类型">
              <el-option :value="1" label="按组生成"></el-option>
              <el-option :value="0" label="单独生成"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="锥桶序号:" prop="no">
            <el-input v-model="coneInfo1.no" size="mini" placeholder="请填写锥桶序号"></el-input>
          </el-form-item>

          <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="coneFormEditCancle">取消</el-button>
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="saveDeviceInfoFormPost('coneEditForm')">保存</el-button>
          </el-row>
        </el-form>
      </div>
  </div>
</template>

<script>
  export default {
    name: "Device",
    data(){
      const isNum = (rule, value, callback) => {
        const age= /^[A-Za-z0-9]{1,500}$/
        if (!age.test(value)) {
          callback(new Error('锥桶编号只可以输入数字和字母'))
        }else{
          callback()
        }
      }
      const lengthMax = (rule,value,callback) => {
        var temp = 0
        for (var i = 0; i < value.length; i++) {
          if (/[\u4e00-\u9fa5]/.test(value[i])) {
            temp += 2
          } else {
            temp++
          }
        }
        if (temp > 50) {
          callback(new Error('长度不能超过50个字符'))
        }else {
          callback()
        }
      }
      return {
        activeName: 'third',
        deviceStyle: 'device-list-body',
        coneStyle: 'device-list-body',
        deviceInfoFormEditStyle:"display:none",
        deviceInfoFormStyle:"display:none",
        coneInfoGroup:undefined,
        deviceUserInfo:{
          id:"",
          termId:"",
          type:1,
          ownerId:"",
          ownerName:"",
          ownerRole:"",
          fenceId:""
        },
        rules:{
          no: [
            { required: true, message: " ", trigger: "blur" },
            { validator:this.isOneToNinetyNine,trigger: 'change'},
            { validator: isNum,trigger: "blur"},
          ],
          termID: [
            { required: true, message: "锥桶编号不能为空", trigger: "blur" },
            { validator: isNum,trigger: "blur"},
            { validator: lengthMax,trigger: "blur"},
          ],
          group:[{ required: true, message: " ", trigger: "blur" },],
          type:[{ required: true, message: " ", trigger: "blur" },],
        },
        deviceUser: [],
        coneInfo1:{},
        coneInfo:{
          id:"",
          termID:"",
          group:"A",
          type:1,
          no:"",
        },
        owner:[]
      }
    },
    mounted() {
      var __this = this
      this.axios.get("cone/listCone").then(function (response) {
        let result = response.data
        if(result.code=='200'){
          __this.deviceUser = result.result
        }
      }).catch(function (error) {
        console.log(error)
      })

      //查询锥桶组数量
      __this.coneInfoGroup=[
        {"label":"A组","value":"A","all":0},
        {"label":"B组","value":"B","all":0},
        {"label":"C组","value":"C","all":0},
        {"label":"D组","value":"D","all":0},
        {"label":"E组","value":"E","all":0},
        {"label":"F组","value":"F","all":0},
        {"label":"G组","value":"G","all":0},
        {"label":"H组","value":"H","all":0},
        {"label":"I组","value":"I","all":0},
        {"label":"J组","value":"J","all":0},
        {"label":"K组","value":"K","all":0},
        {"label":"L组","value":"L","all":0},
        {"label":"M组","value":"M","all":0},
        {"label":"N组","value":"N","all":0},
        {"label":"O组","value":"O","all":0},
        {"label":"P组","value":"P","all":0},
        {"label":"Q组","value":"Q","all":0},
        {"label":"R组","value":"R","all":0},
        {"label":"S组","value":"S","all":0},
        {"label":"T组","value":"T","all":0},
        {"label":"U组","value":"U","all":0},
        {"label":"V组","value":"V","all":0},
        {"label":"W组","value":"W","all":0},
        {"label":"X组","value":"X","all":0},
        {"label":"Y组","value":"Y","all":0},
        {"label":"Z组","value":"Z","all":0},
      ]

      __this.updateConeType()
    },
    methods:{
      updateConeType(){
        let that = this

        that.coneInfoGroup=[
          {"label":"A组","value":"A","all":0},
          {"label":"B组","value":"B","all":0},
          {"label":"C组","value":"C","all":0},
          {"label":"D组","value":"D","all":0},
          {"label":"E组","value":"E","all":0},
          {"label":"F组","value":"F","all":0},
          {"label":"G组","value":"G","all":0},
          {"label":"H组","value":"H","all":0},
          {"label":"I组","value":"I","all":0},
          {"label":"J组","value":"J","all":0},
          {"label":"K组","value":"K","all":0},
          {"label":"L组","value":"L","all":0},
          {"label":"M组","value":"M","all":0},
          {"label":"N组","value":"N","all":0},
          {"label":"O组","value":"O","all":0},
          {"label":"P组","value":"P","all":0},
          {"label":"Q组","value":"Q","all":0},
          {"label":"R组","value":"R","all":0},
          {"label":"S组","value":"S","all":0},
          {"label":"T组","value":"T","all":0},
          {"label":"U组","value":"U","all":0},
          {"label":"V组","value":"V","all":0},
          {"label":"W组","value":"W","all":0},
          {"label":"X组","value":"X","all":0},
          {"label":"Y组","value":"Y","all":0},
          {"label":"Z组","value":"Z","all":0},
        ]

        this.axios.get("cone/getConeTypeAll").then(function (response) {
          let result = response.data
          if(result.code=='200'){
            let coneType = result.result
            if(coneType!=null && coneType.length>0){
              for(let j=0;j<coneType.length;j++){
                let group = coneType[j].type
                for(let i=0;i<that.coneInfoGroup.length;i++){
                  if(that.coneInfoGroup[i].value == group){
                    that.coneInfoGroup[i].all = coneType[j].alls
                    break
                  }
                }
              }
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      selectStyle(val){
        if(val=="first") {
          //this.deviceStyle = 'device-list-body';
          this.$router.push({path: "/device"})
        }else if(val=="second") {
          // this.deviceStyle = 'device-list-body-700'
          this.$router.push({path: "/capital"})
        }else {
          //this.coneStyle = 'device-list-body-800'
          this.$router.push({path: "/cone"})
        }
      },
      isOneToNinetyNine(rule, value, callback) {
        if (!value) {
          return callback(new Error('输入不可以为空'));
        }
        setTimeout(() => {
          if (!Number(value)) {
            callback(new Error('请输入正整数'));
          } else {
            const re = /^[0-9]*[1-9][0-9]*$/;
            const rsCheck = re.test(value);
            if (!rsCheck) {
              callback(new Error('请输入正整数'));
            } else {
              callback();
            }
          }
        }, 0);
      },
      deviceadd(){
        let that = this
        that.updateConeType()
        //this.$refs.coneSaveForm.resetFields();
        that.deviceInfoReset()
        that.deviceInfoFormEditStyle="display:none"
        that.deviceInfoFormStyle = "display:block"
      },
      deviceInfoReset(){
        this.coneInfo={
          id:"",
          termID:"",
          group:"",
          type:"",
          no:"",
        }
      },
      editDevice(index, row){
        this.updateConeType()
        this.deviceInfoFormEditStyle="display:block"
        this.deviceInfoFormStyle = "display:none"
        this.coneInfo1 = JSON.parse(JSON.stringify(row))
      },
      deleteDevice(index, row){
        let that = this
        that.deviceInfoFormEditStyle="display:none"
        that.deviceInfoFormStyle="display:none"
        that.$confirm('确定删除此锥桶信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=> {
          that.axios.get("cone/deleteCone?id=" + row.id).then(function (response) {
            let result = response.data
            if (result.statusCode == '200') {
              that.$message({
                message: '删除数据成功！',
                duration:2000,
                type: 'success',
                offset: '300'
              });
              that.axios.get("cone/listCone").then(function (response) {
                let result = response.data
                if (result.code == '200') {
                  that.deviceUser = result.result
                }
              }).catch(function (error) {
                console.log(error)
              })
            }
          }).catch(function (error) {
            console.log(error)
          })
        }).catch(() => {
        })
      },
      coneFormEditCancle(){
        let that = this
        that.deviceInfoFormEditStyle="display:none"
        that.deviceInfoFormStyle="display:none"
        that.deviceInfoReset()
        that.axios.get("cone/listCone").then(function (response) {
          let result = response.data
          if(result.code=='200'){
            that.deviceUser = result.result
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      coneFormCancle(){
        this.deviceInfoFormEditStyle="display:none"
        this.deviceInfoFormStyle="display:none"
        this.deviceInfoReset()
        this.$refs.coneSaveForm.resetFields();
      },
      clearError(){
        // this.$refs.coneEditForm.resetFields();
        // this.$refs.coneSaveForm.resetFields();
      },
      saveDeviceInfoFormPost(coneEditForm){
        let _this = this
        this.$refs.coneEditForm.validate((valid) => {
          if(valid){
            /* json格式提交： */
            let formData = JSON.stringify(this.coneInfo1);
            let config = {
              headers: {'Content-Type': 'application/json'}
            }
            this.axios.post("cone/editCone", formData, config).then((res)=>{
              if(res.data.statusCode == '200'){
                this.$message({
                  message: '修改数据成功！',
                  type: 'success',
                  duration:1000,
                  offset:'300'
                });
                _this.deviceInfoFormEditStyle = "display:none"
                this.axios.get("cone/listCone").then(function (response) {
                  let result = response.data
                  if(result.code=='200'){
                    _this.deviceUser = result.result
                  }
                }).catch(function (error) {
                  console.log(error)
                })
              }
              if(res.data.statusCode == '500'){
                this.$alert(res.data.message, '提示', {
                  confirmButtonText: '确定',
                });
              }
            })
          }else{
          }
        })
      },
      insertConeInfoFormPost(coneSaveForm){
        let _this = this
        this.$refs.coneSaveForm.validate((valid) => {
          if(valid){
            /* json格式提交： */
            let formData = JSON.stringify(this.coneInfo);
            let config = {
              headers: {'Content-Type': 'application/json'}
            }
            this.axios.post("cone/saveCone", formData, config).then((res)=>{
              if(res.data.statusCode == '200'){
                this.$message({
                  message: '添加数据成功！',
                  type: 'success',
                  duration:1000,
                  offset:'300'
                });
                _this.deviceInfoFormStyle = "display:none"
                this.axios.get("cone/listCone").then(function (response) {
                  let result = response.data
                  if(result.code=='200'){
                    _this.deviceUser = result.result
                  }
                }).catch(function (error) {
                  console.log(error)
                })
              }
              if(res.data.statusCode == '500'){
                this.$alert(res.data.message, '提示', {
                  confirmButtonText: '确定',
                });
              }
            })
          }else{
          }
        })
      }
    }
  }
</script>

<style scoped>
  .device-radio-body{
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 1rem;
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 30px;
    width: 600px;
  }
  .device-list-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 114px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgba(105, 106, 108,0);
    padding:0;
    border-radius: 0.2rem;
    z-index: 999;
    height: 150px;
    background-color: rgba(1,1,1,0);
    width: 610px;
  }
  .device-list-body  .el-tabs__header{
    display: none;
  }
  .device-list-body .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 30px;
  }
  .device-list-body .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 30px;
  }


  .device-list-body .el-table__row td{
    background-color: rgba(233,243,252,1);
  }
  .device-list-body .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(246,251,255,1);
  }
  .device-list-body .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #d3faef;
    color: #118b9c;
  }

  .device-list-body table tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  .device-list-body table tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  .device-list-body-body table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }

  .device-list-body-body table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }


  .device-add-button{
    position: absolute;
    left: 508px;
    top: 117px;
    z-index: 1999;
  }


  .device-info-form{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 242px;
  }

  .device-info-form .el-input__inner{
    border-radius: 1px
  }
  .device-info-form .el-input--prefix .el-input__inner {
    padding-left: 10px;
  }
  .device-info-form .el-input__prefix{
    left: 145px;
  }

  .device-info-form-edit{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 242px;
  }

  .device-info-form-edit .el-input__inner{
    border-radius: 1px
  }
  .device-info-form-edit .el-input--prefix .el-input__inner {
    padding-left: 10px;
  }
  .device-info-form-edit .el-input__prefix{
    left: 145px;
  }
  .el-form-item__content{
    line-height: 20px;
    font-size: 12px;
  }
  .el-form-item__label{
    line-height: 22px;
    font-size: 12px;
  }
  .el-form-item {
    margin-bottom: 2px;
  }
  .showButton{
    display: block;
  }
  .hiddenButton{
    display: none;
  }
  .el-table{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    font-weight: 500;
    color: #000;
  }
  .el-table td, .el-table th{
    padding: 3px 0;
  }
  .el-table-column--selection .cell{
    padding-left: 10px;
  }
</style>
